<template>
    <div class="Code-Box">
        <div v-if="model === 1">
            <div class="input-list happy-code-outsidebox">
                <div v-for="(item, index) in boxList" :key="index">
                    <input 
                        class="happy-code-box" 
                        :class="{'input-focus': item.focus}" 
                        type="number" 
                        maxlength="1" 
                        :focus="item.focus" 
                        v-model="boxList[index].value" 
                        :confirm-hold="true" 
                        @input="inputChange($event, index)"
                        @focus="inputSocus" />
                </div>
            </div>
        </div>
        <div v-if="model === 2" style="position: relative;">
            <div class="input-list happy-code-outsidebox" @click="doFocus">
                <div v-for="(item, index) in boxList" :key="index">
                    <div @click="doFocus" class="happy-code-box" :class="{'input-focus': item.focus}" >{{item.value}}</div>
                </div>
            </div>
            <div style="display: block;">
                <input class="white-input"
                    type="number"
                    :maxlength="codeLength"
                    :focus="isFocus"
                    v-model="trueValue" 
                    :confirm-hold="isFocus"
                    :hold-keyboard="true"
                    cursor="500"
                    @input="inputChange($event, 0)" />
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'CodeBox',
        props: {
            model: {
                teyp: Number,
                default: 2
            },
            codeLength: {
                type: Number,
                default: 5
            },
            testCode: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                boxList: [],
                
                trueValue: '',
                isFocus: true
            }
        },
        mounted() {
            this.initCodeBox()
        },
        methods: {
            // 初始化验证码框
            initCodeBox() {
                this.boxList = []
                this.trueValue = ''
                for (let i=0; i<this.codeLength; i++) {
                    const item = {
                        value: '',
                        focus: false
                    }
                    if (i === 0) {
                        item.focus = true
                    }
                    this.boxList.push(Object.assign({},item))
                }
            },
            // 输入短信验证码逻辑
            inputChange(e, index) {
                if (this.model === 1) {
                    if (this.boxList[index].value.length > 0) {
                        if (index < this.codeLength) {
                            this.boxList[index].focus = false
                            if ((index+1) < this.codeLength) {
                                this.boxList[index+1].focus = true
                            }
                            if ((index+1) == this.codeLength) {
                                this.msgCode = ''
                                this.boxList.map(item => {
                                    this.msgCode += ''+item.value
                                })
                                this.$emit('ok', this.msgCode)
                            }
                        }
                    }
                }
                // 模式二的输入事件
                if (this.model === 2) {
                    for (let i=0; i<this.codeLength; i++) {
                        this.boxList[i].focus = false
                        if (i < this.trueValue.length) {
                            this.boxList[i].value = this.trueValue[i]
                        } else {
                            this.boxList[i].value = ''
                        }
                    }
                    if (this.trueValue.length === this.codeLength) {
                        this.boxList[this.trueValue.length-1].focus = true
                        this.$emit('ok', this.trueValue)
                    } else {
                        this.boxList[this.trueValue.length].focus = true
                    }
                }
            },
            // 让输入框获取焦点
            doFocus() {
                this.isFocus = true
            },
            inputSocus() {
                
            }
        }
    }
</script>
<style scoped lang="scss">
    .input-list {

    }
	/* 输入验证码 */
	.happy-code-outsidebox{
		width: 100%;
		position: relative;
		display: flex;
		justify-content: space-between;
        overflow: hidden;
        height: 120rpx;
        align-items: center;
	}
	.happy-code-box{
	    width: 90rpx;
	    height: 104rpx;
	    background: #F5F5F5;
	    border-radius: 16rpx;
	    color: #333333;
	    text-align: center;
        line-height: 104rpx;
        font-size: 42rpx;
	}
	.input-focus {
	    border: 2px solid #397EF5;
	}
    .white-input {
        position: absolute;
        left: -100%;
        top: 0;
        height: 104rpx;
        width: 200%;
        opacity: 0;
        background-color: rgba(255, 255, 255, 0); /* 设置输入框背景颜色为半透明白色 */
        letter-spacing: 550.4rpx!important;
        color: rgba(0, 0, 0, 0); /* 设置文字颜色为半透明黑色 */
        border: 1px solid red;
    }
</style>